<template>
  <div>
    <el-divider></el-divider>
    <div>
      <el-row :gutter="20">
        <el-form :inline="true" :model="selectLikeForm" class="demo-form-inline">
          <el-form-item label="驾驶员名字">
            <el-input v-model="selectLikeForm.driverName" placeholder="名字"></el-input>
          </el-form-item>
          <el-form-item label="驾驶员地址">
            <el-input v-model="selectLikeForm.address" placeholder="地址"></el-input>
          </el-form-item>
          <el-form-item label="驾照类型">
            <el-input v-model="selectLikeForm.licenseType" placeholder="驾照类型"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="selectLikeForm.driverSex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="onQuery">查询</el-button>
            <el-button @click="addFormVisible=true" type="primary">新增</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <el-divider></el-divider>


    <!--信息添加-->
    <el-dialog title="信息添加" :visible.sync="addFormVisible">
      <el-form :model="addForm" ref="driverFormRef">
        <el-form-item label="驾驶员姓名" :label-width="formLabelWidth">
          <el-input v-model="addForm.driverName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" align="left">
          <el-select v-model="addForm.driverSex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="addForm.idNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="addForm.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="addForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="驾照编号" :label-width="formLabelWidth">
          <el-input v-model="addForm.licenseCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="驾照类型" :label-width="formLabelWidth">
          <el-input v-model="addForm.licenseType" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAdd">确 定</el-button>
      </div>
    </el-dialog>

    <!--    数据显示 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <!--  prop :表示每一次循环显示对象的属性的值  -->
      <el-table-column
        type="index"
        label="编号"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="driverName"
        label="驾驶员名字"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        prop="driverSex"
        label="驾驶员性别"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="idNumber"
        label="驾驶员身份证号"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phoneNumber"
        label="手机号"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column
        prop="licenseCode"
        label="驾驶证编号"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="licenseType"
        label="驾照类型"
        align="center"
        width="150">
      </el-table-column>

<!--删除驾驶员-->
      <el-table-column
        label="操作"
        align="center"
        width="150">
        <template slot-scope="scope">
          <el-button @click="reShow(scope.row.driverId)" type="primary" size="small"
                     icon="el-icon-edit"></el-button>
          <template>
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该驾驶员吗？"
              @confirm="deleteDriverByUserId(scope.row.driverId)"
            >
              <el-button type="danger" size="small"
                         icon="el-icon-delete" slot="reference"></el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!--信息修改-->
    <el-dialog title="信息修改" :visible.sync="changeFormVisible">
      <el-form :model="form" ref="driverFormRef">
        <el-form-item label="驾驶员姓名" :label-width="formLabelWidth">
          <el-input v-model="form.driverName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" align="left">
          <el-select v-model="form.driverSex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="form.idNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="驾照编号" :label-width="formLabelWidth">
          <el-input v-model="form.licenseCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="驾照类型" :label-width="formLabelWidth">
          <el-input v-model="form.licenseType" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="changeFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>


    <!--分页插件-->
    <center>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.page"
          :page-sizes="[1, 2, 5,10,15]"
          :page-size="pageData.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </center>

  </div>
</template>


<script>
export default {
  data() {
    return {
      pageData: {
        page: 1,//默认第一页
        size: 5,//显示条数默认5条/页
      },
      total: 0,
      tableData: [],
      changeFormVisible: false,
      addFormVisible: false,
      form: {
        driverId: '',
        driverName: '',
        driverSex: '',
        idNumber: '',
        phoneNumber: '',
        address: '',
        licenseType: '',
        licenseCode: ''
      },
      addForm: {
        driverName: '',
        driverSex: '',
        idNumber: '',
        phoneNumber: '',
        address: '',
        licenseType: '',
        licenseCode: ''
      },
      selectLikeForm: {
        driverId: '',
        driverName: '',
        driverSex: '',
        idNumber: '',
        phoneNumber: '',
        address: '',
        licenseType: '',
        licenseCode: ''
      },
      queryFormVisible: true,
      formLabelWidth: '100px'
    }
  },
  methods: {
    reShow(driverId) {//修改
      // console.log(driver)
      let _this = this;
      this.changeFormVisible = true;
      this.$axios({
        method: 'get',
        url: 'driver/driverOne?id=' + driverId,
        // params: this.pageData
      }).then(res => {
        _this.form = res.data.data;
      }).catch(error => {
        this.$message.error(error);
      })
    },
    onSubmit() {//提交修改
      let _this = this;
      // console.log(_this.addForm)
      //验证驾照类型
      if(!_this.validateLicenseType(_this.form.licenseType)){
        _this.$message.error('\'驾照类型格式不正确，应为A/B/C + 1/2/3\'！！！');
        return;
      }
      // //验证驾照号  786758301082006
      // if(!_this.validateLicenseType(_this.addForm.licenseType)){
      //   _this.$message.error('\'驾照类型格式不正确，应为A/B/C + 1/2/3\'！！！');
      //   return;
      // }
      //验证手机号  13025648012
      if(!_this.validatePhoneNumber(_this.form.phoneNumber)){
        _this.$message.error('手机号不合格！！！');
        return;
      }
      //验证id号 510923200312105849
      if(!_this.validateIdNumber(_this.form.idNumber)){
        _this.$message.error('身份证号不合格！！！');
        return;
      }
      //验证信息是否有空
      for (const item in _this.form) {
        if (_this.form[item] === '' || _this.form[item] === null || typeof _this.form[item] === "undefined"){
          _this.$message.error('请将信息填写完全！！！');
          console.log(this.form);
          return;
        }
      }
      this.changeFormVisible = false;

      this.$axios({
        method: 'post',
        url: 'driver/updateDriver/',
        data: JSON.stringify(_this.form)
      }).then(res => {
        // console.log(res)
        this.showTable();
        _this.$message.success('修改成功！！！');
      }).catch(error => {
        this.$message.error(error);
      })
    },
    deleteDriverByUserId(id) {//删除
      // console.log(id)
      let _this = this;
      this.$axios({
        method: 'delete',
        url: 'driver/deleteDriver',
        params: {id}
      }).then(res => {
        this.showTable();
        _this.$message.success('删除成功！！！');
      }).catch(error => {
        this.$message.error(error);
      })
    },
    onQuery() {
      let _this = this;
      _this.queryFormVisible = false;

      // console.log(_this.selectLikeForm)
      this.$axios({
        method: 'post',
        url: 'driver/selectLike',
        data: JSON.stringify(this.selectLikeForm)
      }).then(res => {
        console.log(res);
        _this.total = res.data.data.length
        this.tableData = res.data.data;
        _this.$message.success('查询成功！！！');
      }).catch(error => {
        this.$message.error(error);
      })
    },
    onAdd() {
      let _this = this;
      // console.log(_this.addForm)

      //验证驾照类型
      if(!_this.validateLicenseType(_this.addForm.licenseType)){
        _this.$message.error('\'驾照类型格式不正确，应为A/B/C + 1/2/3\'！！！');
        return;
      }

      // //验证驾照号  786758301082006
      // if(!_this.validateLicenseType(_this.addForm.licenseType)){
      //   _this.$message.error('\'驾照类型格式不正确，应为A/B/C + 1/2/3\'！！！');
      //   return;
      // }

      //验证手机号  13025648012
      if(!_this.validatePhoneNumber(_this.addForm.phoneNumber)){
        _this.$message.error('手机号不合格！！！');
        return;
      }

      //验证id号 510923200312105849
      if(!_this.validateIdNumber(_this.addForm.idNumber)){
        _this.$message.error('身份证号不合格！！！');
        return;
      }

      //验证信息是否有空
      for (const item in _this.addForm) {
        if (_this.addForm[item] === '' || _this.addForm[item] === null || typeof _this.addForm[item] === "undefined"){
          _this.$message.error('请将信息填写完全！！！');
          console.log(this.addForm);
          return;
        }
      }

      this.$axios({
        method: 'put',
        url: 'driver/insertDriver',
        data: JSON.stringify(this.addForm)
      }).then(res => {
        console.log(res);
        _this.addFormVisible = false;
        this.tableData = res.data.data;
        _this.$message.success('增加成功！！！');
      }).catch(error => {
        this.$message.error(error);
      })

    },
    showTable() {
      let _this = this;
      this.$axios({
        method: 'get',
        url: 'driver/driverList/',
        params: this.pageData
      }).then(res => {
        console.log(res)
        if (res.data.status === 200) {
          //push方法将对象转成数组
          _this.tableData = res.data.data.records
          _this.total = res.data.data.total
          // console.log("table:", this.tableData)
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        this.$message.error(error);
      })
    },
    handleSizeChange(newSize) { // size 发送改变执行的函数
      this.pageData.size = newSize;
      this.showTable()
    },
    handleCurrentChange(newPage) {// page 发送改变执行的函数
      this.pageData.page = newPage
      this.showTable()
      // console.log(newPage)
    },
    validatePhoneNumber(phone) {
      const regExp = /^1[3456789]\d{9}$/;
      let result = regExp.test(phone);
      console.log(result);
      return result;
    },
    validateIdNumber(id){
      if(id.length!==18)
        return false;
      return true;
    },
    validateLicenseType(licenseType) {
      const regExp = /^[ABC][123]$/;
      if (!regExp.test(licenseType)) {
        console.log(regExp.test(licenseType))
        return false;
      }
      return true;
    }

  },
  mounted() {
    this.username = sessionStorage.getItem('loginUsername');
    this.showTable();
  }
}
</script>
<style>
</style>


